<template>
	<text :style="{ color:getColor, fontSize: getSize, fontWeight: fontWeight}" class="ufine-icon"
		:class="[prefix + name]" @click="handleClick"></text>
</template>


<script>
	export default {
		name: "ufine-icon",
		emits: ['click'],
		// #ifdef MP-WEIXIN
		options: {
			addGlobalClass: true
		},
		// #endif
		props: {
			name: {
				type: String,
				default: ''
			},
			size: {
				type: [Number, String],
				default: 0
			},
			//rpx | px
			unit: {
				type: String,
				default: ''
			},
			color: {
				type: String,
				default: ''
			},
			//字重
			fontWeight: {
				type: [Number, String],
				default: 'normal'
			},
			//是否禁用点击
			disabled: {
				type: Boolean,
				default: false
			},
			params: {
				type: [Number, String],
				default: 0
			},
			prefix: {
				type: String,
				default: 'icon-'
			}
		},
		computed: {
			getSize() {
				const size = 28
				const unit = 'px'
				return (this.size || size) + (this.unit || unit)
			},
			getColor() {
				let color = this.color
				if (!color || color === true) {
					color = '#333333'
				}
				return color;
			}
		},
		data() {
			return {};
		},
		methods: {
			handleClick() {
				if (this.disabled) return;
				this.$emit('click', {
					params: this.params
				});
			}
		}
	}
</script>

<style scoped>
	@import './iconfont.css';
	@font-face {
		font-family: ufineFont;
		src: url("./iconfont.ttf") format("truetype");
	}
	.ufine-icon {
		font-family: ufineFont;
		text-decoration: none;
		text-align: center;
		/* #ifdef H5 */
		cursor: pointer;
		/* #endif */
	}
</style>